<template>
    <!-- 导航的容器标签 -->
    <el-menu default-active="2" class="el-menu-vertical-demo">
      <el-submenu v-for="(item) in getNavMenu($router.options.routes)" :index="item.meta.id.toString()" :key="item.meta.id">

        <!-- 渲染导航的标题 -->
        <template slot="title">
          <i :class="item.meta.iconclass"></i>
          <span>{{item.meta.name}}</span>
        </template>

         <!-- 导航的每一个选项 -->
          <el-menu-item v-for="sitem in getNavMenu(item.children)" :index="sitem.meta.id.toString()" :key="sitem.meta.id">
            <span @click="clickHandle(sitem)">{{sitem.meta.name}}</span>
          </el-menu-item>

      </el-submenu>
    </el-menu>
</template>

<script>
export default {
    data() {
        return {}
    },
    mounted() {
        // 返回的是一个路由数组,里面包含home(应用管理)、log(日志管理)
        console.log(this.getNavMenu(this.$router.options.routes));
    },
    methods: {
        getNavMenu(list) { // list是一个路由数组 形参
            return list.filter((item)=> { //过滤
                return item.meta
            })
        },
        clickHandle(sitem) {
            this.$router.replace(sitem.path)
            // console.log(sitem.path); 当前点击的路由的hash地址
        }
    },
}
</script>

